<template>
	<!-- 我要反馈 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="我要反馈" />
		<view class="main">
			<view class="title">反馈描述</view>
			<textarea v-model="content" maxlength="200" placeholder="请详细描述您遇到的问题，200字以内（必填）" placeholder-style="font-size: 24rpx;color: #666666;" />
			<view class="uploadimage">
				<view v-for="(item,index) in imageList" :key="index" class="image">
					<image :src="item" @click="priviews(imageList,index)" class="img"></image>
					<image src="/static/images/mine/delete.png" class="icon" @click="deleteItem(index)"></image>
				</view>
				<view class="uploadbtn" v-if="imageList.length < 6" @click="openImage">
					<text>+</text>上传图片
				</view>
			</view>
			<view class="text">最多上传6张图片</view>
			<view class="phone">您的手机号（选填）</view>
			<input type="number" maxlength="11" v-model="phone" placeholder="填写您的手机号" placeholder-style="font-size: 24rpx;color: #666666;" />
			<view class="btn" @click="submit">提交</view>
			<view class="desc">为保护用户个人隐私，平台不会将您提交的反馈信息透露给任何第三方，请认真填写</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'',//反馈描述
				phone:'',//手机号码
				imageList:[],//展示-完整路径
				imgs:[],//提交-相对路径
				allowTap:true// 防误触
			}
		},
		methods: {
			openImage () {
				uni.chooseImage({
					count: 6 - this.imageList.length,
					success:(data)=> {
						console.log(data)
						let tempFilePaths = data.tempFilePaths;
						let tempFiles = data.tempFiles;
						for(let i=0;i<tempFilePaths.length;i++){
							let tempFilePaths = data.tempFilePaths[i];
							this.$request.uploadImage(tempFilePaths).then(res => {
								this.imageList.push(res.url);
								this.imgs.push(res.url1);
							})
						}
					}
				})
			},
			priviews(imgs,i){
				uni.previewImage({
					urls:imgs,
					current:i
				})
			},
			deleteItem (index) {
				this.imageList.splice(index, 1);
				this.upimageList.splice(index, 1);
			},
			//提交
			submit(){
				if(this.content == ''){
					uni.showToast({
						title:'请输入反馈描述',
						icon:'none'
					})
					return
				}
				if(this.imgs.length === 0){
					uni.showToast({
						title:'请上传反馈图片',
						icon:'none'
					})
					return
				}
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},2000)
				this.$api.feedback({
					content:this.content,
					phone:this.phone,
					imgs:this.imgs.toString()
				}).then(res=>{
					uni.showToast({
						title:'提交反馈成功'
					})
					setTimeout(()=>{
						uni.navigateBack();
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding: calc(var(--status-bar-height) + 100rpx) 0 30rpx;
}
.main{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 20rpx 30rpx 127rpx;
	margin: 30rpx 30rpx 0;
	
	.title{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}
	textarea{
		width: 630rpx;
		height: 200rpx;
		background: #F8F8F8;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin: 23rpx 0 26rpx;
	}
	.uploadimage{
		display: flex;
		flex-wrap: wrap;
		
		.image{
			width: 190rpx;
			height: 190rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			position: relative;
			
			&:nth-child(3n){
				margin-right: 0;
			}
			.img {
				@include img;
				border-radius: 20rpx;
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
	.uploadbtn{
		width: 190rpx;
		height: 190rpx;
		background: #F8F8F8;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		padding-top: 50rpx;
		@include column-center;
		margin-bottom: 20rpx;
		
		text{
			font-size: 36rpx;
		}
	}
	.text{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}
	.phone{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin: 30rpx 0 26rpx;
	}
	input{
		width: 630rpx;
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		text-align: center;
	}
	.btn{
		width: 560rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FF8382 0%, #FF670C 100%);
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin: 70rpx auto;
	}
	.desc{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}
}
</style>
